<template>
  <div class="w-full p-6 flex h-full justify-center items-center bg-bg">
    <el-scrollbar height="83vh" class="w-full h-full rounded-lg">
      <el-form label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="awardInfo.title" readonly></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="awardInfo.content"
            readonly
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="awardInfo.type" readonly></el-input>
        </el-form-item>
        <el-form-item label="获取时间">
          <el-date-picker v-model="awardInfo.getTime" type="date" readonly>
          </el-date-picker>
        </el-form-item>
        <el-form-item label="图片描述">
          <el-image
            style="width: 100px; height: 100px"
            src="https://oktools.net/ph/100x100?t=点击查看"
            :preview-src-list="awardInfo.images"
          >
          </el-image>
        </el-form-item>
        <el-form-item
          label="文件描述"
          v-for="(item, index) in awardInfo.files"
          :key="index"
        >
          <el-link :href="item['url']" class="mr-4"
            ><i class="el-icon-document"></i>{{ item["name"] }}
          </el-link>
        </el-form-item>
      </el-form>
    </el-scrollbar>
  </div>
</template>

<script lang="ts">
import { onMounted, reactive } from "vue-demi";
import { AwardInsertDTO, AwardSelectDTO, selectAwardById } from "/@/api/award";
import { BASE_URL } from "/@/utils/http/core";

export default {
  props: {
    awardId: {
      type: Number,
      required: true
    }
  },
  setup(props) {
    const awardInfo = reactive<AwardInsertDTO>({
      title: "",
      content: "",
      type: "",
      getTime: new Date(),
      files: [],
      images: []
    });

    const getAwardInfo = async () => {
      const res = await selectAwardById(props.awardId);
      if (res.code === 1) {
        const data = res.response as AwardSelectDTO;
        awardInfo.title = data.title;
        awardInfo.content = data.content;
        awardInfo.type = data.type;
        awardInfo.getTime = data.getTime;
        awardInfo.files = initFileList(data.files);
        awardInfo.images = initImageList(data.images);
      }
    };

    const initFileList = files => {
      let fileList = [];
      files.forEach(item => {
        fileList.push({
          name: item.name,
          url: BASE_URL + "/file/name/" + item.url
        });
      });
      return fileList;
    };

    const initImageList = images => {
      let imageList = [];
      images.forEach(item => {
        imageList.push(BASE_URL + "/img/" + item);
      });
      return imageList;
    };

    onMounted(async () => {
      await getAwardInfo();
    });

    return {
      awardInfo
    };
  }
};
</script>

<style scoped></style>
